<template>
  <div class="detail">
    <div class="detail-top">
      <div class="detail-top-header">
        <div>
          <p>订单编号：{{ detailObj.orderNo }}</p>
          <p>下单时间:{{ detailObj.orderTime }}</p>
          <p>
            付款状态:
            <span :class="detailObj.payStatus === 1 ? 'active' : detailObj.payStatus === 2 ? 'active1' : 'active3'">{{
              detailObj.payStatus === 1 ? "待付款" : detailObj.payStatus === 2 ? "部分付款" : "已付款"
            }}</span>
            <span v-if="detailObj.isClose == 1 ? false : true">
              <el-button
                type="primary"
                size="small"
                v-if="detailObj.payStatus === 1 ? true : detailObj.payStatus === 2 ? true : false"
                >去支付</el-button
              >
            </span>
          </p>
        </div>
        <div>
          <div v-if="detailObj.isClose == 1 ? false : true">
            <span @click="handelChangeFirstContract(3)" v-if="detailObj.orderStatus !== 3">改为最终合同</span>
            <span v-if="detailObj.orderStatus !== 3" style="margin: 0 20px"></span>
            <span @click="handelClickClose">关闭交易</span>
            <span style="margin: 0 20px"></span>
            <el-dropdown>
              <span class="el-dropdown-link">
                更多操作
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="handelChangeFirstContract(2)"
                    v-if="!(detailObj.orderStatus === 2 || detailObj.orderStatus === 3)"
                    >改为首次合同</el-dropdown-item
                  >
                  <el-dropdown-item @click="handelChangeFirstContract(3)" v-if="detailObj.orderStatus !== 3"
                    >改为最终合同</el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click="handelClickChangePic()" v-if="detailObj.orderStatus !== 3">修改价格</el-dropdown-item> -->
                  <el-dropdown-item @click="handelClickChangePic()">修改价格</el-dropdown-item>
                  <!-- <el-dropdown-item @click="handelClickChangeAdess" v-if="detailObj.orderStatus !== 3">修改地址</el-dropdown-item> -->
                  <el-dropdown-item @click="handelClickChangeAdess">修改地址</el-dropdown-item>
                  <el-dropdown-item @click="handelClickClose" v-if="detailObj.orderStatus !== 3">关闭交易</el-dropdown-item>
                  <el-dropdown-item @click="handelClickMarks">添加备注</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span></span>
          </div>
          <el-button type="primary" v-if="detailObj.isClose == 1 ? true : false" link @click="handelClickdelOrder"
            >删除订单</el-button
          >
          <span v-if="detailObj.isClose == 1 ? true : false" style="margin: 0 20px"></span>
          <el-button type="primary" link class="back" @click="handelClickBack">返回</el-button>
        </div>
      </div>
      <div class="detail-top-content">
        <div class="top">
          <div v-if="detailObj.isClose == 1 ? false : true">
            <h2>{{ detailObj.orderStatus === 1 ? "意向合同" : detailObj.orderStatus === 2 ? "首次合同" : "最终合同" }}</h2>
            <p>请与客户确认商品合同信息无误后，可将订单转入最终合同，进行支付交易……</p>
          </div>
          <div v-else class="close_status">
            <h2>已关闭</h2>
            <p style="color: #4e5969; font-size: 14px">感谢您的支持和信任，您的订单已处于关闭状态</p>
            <p>关闭原因:{{ detailObj.closeReason }}</p>
          </div>
        </div>
        <div class="step" v-if="detailObj.isClose == 1 ? false : true">
          <step-View :active="detailObj.orderStatus" :list="data.stepList" :direction="'horizontal'"></step-View>
        </div>
        <div class="content">
          <div class="content-child">
            <header>客户信息</header>
            <div>
              <p>{{ detailObj.customerName }}</p>
              <p>电话:{{ detailObj.customerMobileCode }}</p>
              <p>项目地址：{{ detailObj.customerAddress }}</p>
            </div>
          </div>
          <div class="content-child">
            <header>收货信息</header>
            <div>
              <p>姓名:{{ detailObj.receivingName }}</p>
              <p>电话:{{ detailObj.receivingMobile }}</p>
              <p>
                收货地址：{{ detailObj.receivingAreaDetail + detailObj.receivingAddress }}
                <span v-if="detailObj.isClose == 1 ? false : true">
                  <span v-if="detailObj.orderStatus !== 3" style="color: #007dff; cursor: pointer" @click="handelClickChangeAdess"
                    >修改</span
                  >
                </span>
              </p>
            </div>
          </div>
          <div class="content-child">
            <header>订单备注</header>
            <div>
              <p style="display: flex">
                <span style="display: inline-block; min-width: 100px; width: 100px">订单备注：</span
                ><span class="remarks" v-html="detailObj.remark"></span>
                <template v-if="detailObj.isClose == 1 ? false : true">
                  <div style="margin-top: 0">
                    <RemarkEditor v-model="detailObj.remark" :showCancel="false" @submit="handelUpdateMarks2" />
                  </div>
                </template>

                <!-- <span
                  v-if="detailObj.isClose == 1 ? false : true"
                  style="color: #007dff; cursor: pointer"
                  @click="handelClickMarks"
                  >添加备注
                </span> -->
              </p>
            </div>
          </div>
          <div class="content-child">
            <header>付款信息</header>
            <div>
              <p>应收金额：{{ detailObj.actualPrice }}</p>
              <p>付款状态:{{ detailObj.payStatus == 1 ? "待付款" : detailObj.payStatus == 2 ? "部分付款" : "已付款 " }}</p>
              <p>付款时间:{{ detailObj.payTime }}</p>
            </div>
          </div>
          <div class="content-child">
            <header>采购商信息</header>
            <div>
              <p>{{ detailObj.purchaseName }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-bottom">
      <div class="top">
        <div class="tabel_content">
          <div class="tabel_header">
            <div>供应商信息</div>
            <div>商品信息</div>
            <div>商品价格</div>
            <div>数量</div>
            <div>商品件数</div>
            <div>单位</div>
            <div>实付价格</div>
            <div>状态</div>
            <div>操作</div>
          </div>
          <div class="lists" v-for="(item, index) in detailObj.orderDetailGroup" :key="index">
            <div class="left" :span="4">
              <div class="gh_message">
                <p>企业名称:</p>
                <p>{{ item.factorName }}</p>
              </div>
              <div class="gh_message">
                <p>跟单人员:</p>
                <p>{{ item.trackerName }}</p>
              </div>
              <div class="gh_message">
                <p>工厂地址:</p>
                <p>{{ item.factorAddress }}</p>
              </div>
              <div class="gh_message">
                <p>跟单人电话:</p>
                <p>{{ item.trackerTel }}</p>
              </div>
            </div>
            <div class="right">
              <div class="right_content" v-for="(citem, cindex) in item.list" :key="cindex">
                <div class="sp_meassge" style="width: 42%">
                  <div>
                    <img :src="citem.mainPicUrl" alt="" />
                  </div>
                  <div>
                    <p>{{ citem.productAliasName }}</p>
                    <p>{{ citem.skuSpecification }}</p>
                    <p>SKU编码:{{ citem.skuCode }}</p>
                    <p>ID:{{ citem.productId }}</p>
                  </div>
                </div>
                <div style="width: 8%; text-align: center">{{ citem.unitPrice }}</div>
                <div style="width: 8%; display: flex; flex-direction: column; justify-content: center">
                  {{ citem.commodityNum }}
                  <div class="lock_num">
                    <el-icon><Lock /></el-icon>
                    <span>:{{ citem.fromLibNum }}</span>
                  </div>
                </div>
                <div style="width: 8%; display: flex; flex-direction: column; justify-content: center">
                  {{ citem.detailNum }}
                  <div class="lock_num">
                    <el-icon><Lock /></el-icon>
                    <span>:{{ citem.fromLibPartNum }}</span>
                  </div>
                </div>
                <div style="width: 8%; text-align: center">
                  {{ useCodeArrStore().getDictName("shop_unit", citem.productUnit) }}
                </div>
                <div style="width: 8%; text-align: center">{{ citem.actualPrice }}</div>
                <div style="width: 8%; text-align: center">
                  {{
                    useCodeArrStore().getDictName("purchase_product_state", citem.dealState) == null
                      ? "待采购"
                      : useCodeArrStore().getDictName("purchase_product_state", citem.dealState)
                  }}
                </div>
                <div class="operate" style="width: 10%; padding: 0">
                  <!-- 锁定 -->
                  <div v-if="cindex === 0" style="padding: 0; width: 100%">
                    <el-button v-if="item.showLockButton" size="small" @click="handelClickStockLocking(item)" type="primary" link
                      >库存锁定</el-button
                    >
                    <div class="lock_num-total">
                      <p>数量: {{ item.fromLibNum }}</p>
                      <p>件数: {{ item.fromLibPartNum }}</p>
                    </div>
                  </div>
                  <div v-if="detailObj.isClose == 1 ? false : detailObj.orderStatus == 1 ? false : true">
                    <div v-if="cindex === 0">
                      <el-button
                        v-if="isShowCgBtn(item.list)"
                        size="small"
                        @click="handelClickgoToCgOder(item, citem)"
                        type="primary"
                        link
                        >立即发起采购单</el-button
                      >
                      <el-button
                        v-if="isShowCgBtn(item.list)"
                        size="small"
                        @click="handelClickRegularTimeProcure(item)"
                        type="primary"
                        link
                        >设置定时采购</el-button
                      >
                    </div>

                    <div v-if="cindex === 0">
                      <span v-for="(timer, tindex) in item.timingPurchaseOrders" :key="tindex">
                        <el-button
                          link
                          size="small"
                          v-if="timer.businessState === 0"
                          type="primary"
                          @click="handelClickEditTimeProcure(item, cindex, timer)"
                        >
                          <!-- {{ item.list[cindex].autoPurchaseTime || "-" }} -->
                          {{ timer.autoPurchaseTime || "-" }}
                        </el-button>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="botton">
        <div></div>
        <div>
          <p>
            商品总计：<span>{{ detailObj.commodityNum }}种商品({{ detailObj.detailNum }})件</span>
          </p>
          <p>
            商品总价：<span>￥{{ data.total.toFixed(2) }}</span>
          </p>
          <p>
            优惠金额：<span>￥{{ detailObj.salePrice }}</span>
          </p>
          <p>
            其他费用：<span>￥{{ detailObj.otherPrice }}</span>
          </p>
          <p>
            <!-- {{ (Number(data.total) - Number(detailObj.salePrice) + Number(detailObj.otherPrice)).toFixed(2) }} -->
            实收金额：<span>￥{{ detailObj.payAmount }}</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 修改合同状态 -->
    <change-Contract
      :dialogVisible="data.changeContractVisbel"
      :status="data.status"
      @ok="handelOk"
      @close="data.changeContractVisbel = false"
    ></change-Contract>
    <!-- 关闭交易 -->
    <dialog-View :isShow="data.isShowOrderClose" :title="'关闭交易'" :width="'30%'">
      <form-View
        :formList="data.formListOrderClose"
        :rules="data.rulesOrderClose"
        :position="'left'"
        @update="handelUpdateClose"
        @back="data.isShowOrderClose = false"
      ></form-View>
    </dialog-View>
    <!-- 修改订单价格 -->
    <dialog-View :isShow="data.isShowOrderPic" :title="'修改订单价格'" :width="1200">
      <template #header>
        <div style="display: flex; align-items: center">
          <p class="f18 mr20">修改订单价格</p>
          <el-button type="primary" @click="openSelectProd">添加商品</el-button>
        </div>
      </template>
      <div class="product_information">
        <!-- 订单数据表格 -->
        <div class="sticky" v-if="detailObj.orderDetailList.length > 0" style="margin-top: 16px">
          <el-row class="table-head">
            <el-col :span="8">
              <span>商品信息</span>
            </el-col>
            <el-col :span="2"> 商品价格 </el-col>
            <el-col :span="2"> 数量 </el-col>
            <el-col :span="2"> 商品清单件数单位 </el-col>
            <el-col :span="4"> 实付价格 </el-col>
            <el-col :span="4"> 涨价/减价(-为降价+为涨价) </el-col>
            <el-col :span="2"> 操作 </el-col>
          </el-row>
        </div>
        <!-- 列表 -->
        <div v-if="detailObj.orderDetailList.length > 0" class="table-list">
          <el-checkbox-group v-model="checkedList">
            <div class="goods" v-for="(goods, index) in detailObj.orderDetailList" :key="index">
              <el-row>
                <el-col :span="8">
                  <img class="image" :src="goods.mainPicUrl || defaultImage" alt="" />
                  <div class="info">
                    <div>{{ goods.productAliasName }}</div>
                    <div>sku编码:{{ goods.skuCode }}</div>
                    <div>ID:{{ goods.collectId }}</div>
                  </div>
                </el-col>
                <el-col :span="2">
                  {{ goods.unitPrice }}
                </el-col>
                <el-col :span="2">
                  <el-input
                    v-model="goods.commodityNum"
                    @change="
                      () => {
                        handelChangeCommodityNum(goods.salePrice, goods);
                      }
                    "
                  ></el-input
                  >套
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" link size="small" @click="openSku">
                    {{ goods.partNum }}
                  </el-button>
                </el-col>
                <el-col :span="4"> ￥{{ goods.actualPrice }} </el-col>
                <el-col :span="4">
                  <el-input
                    v-model="goods.salePrice"
                    :placeholder="goods.salePrice"
                    type="number"
                    class="input-with-select"
                    @change="
                      () => {
                        handelInputSalePrice(goods.salePrice, goods);
                      }
                    "
                  >
                    <template #prepend>
                      <span>{{ isReduction(goods.salePrice) }}</span>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="2">
                  <el-popconfirm title="确定删除?" @confirm="handelClickDeletsp(goods)">
                    <template #reference>
                      <el-button link type="primary" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </el-col>
              </el-row>
            </div>
          </el-checkbox-group>
        </div>
        <el-empty v-if="detailObj.orderDetailList.length === 0" description="暂无商品信息, 您可以添加商品到当前订单合同中" />
        <!-- 计算涨价降价总和价格 -->
        <div class="total_price">
          <div class="total_price-left">
            <div>
              <span>优惠金额:</span>
              <el-input-number
                v-model="data.salePrice"
                :controls="false"
                :min="0"
                style="width: 100px"
                @change="handelInputPreferentialMoney"
              />
            </div>
            <div>
              <span>其他费用:</span>
              <el-input-number
                v-model="data.otherPrice"
                :controls="false"
                :min="0"
                style="width: 100px"
                @change="handelInputOther"
              />
            </div>
          </div>
          <div class="total_price-right">
            <p class="pt10 mr16">
              合计金额:<span>￥{{ detailObj.actualPrice }}</span>
            </p>

            <el-button @click="data.isShowOrderPic = false">取消</el-button>
            <el-button type="primary" @click="handelClickPicSave">保存修改</el-button>
          </div>
        </div>
      </div>

      <!-- 材料-选择商品 -->
      <selectProduct :optionInfo="prodOptionInfo" @close="prodOptionInfo.isShow = false" @submit="selectSubmit" />
    </dialog-View>
    <!-- 修改订单地址 -->
    <dialog-View :isShow="data.isShowOrderAdress" :title="'修改地址'" :width="'30%'">
      <form-View
        :formList="data.formListOrderAdess"
        :rules="data.rulesOrderAdess"
        :editItem="data.editItem"
        :position="'left'"
        @update="handelUpdateAdess"
        @back="data.isShowOrderAdress = false"
      ></form-View>
    </dialog-View>
    <!-- 修改订单备注 -->
    <dialog-View :isShow="data.isShowMark" :title="'添加备注信息'" :width="'30%'">
      <form-View
        :formList="data.formList"
        :rules="data.rules"
        :editItem="data.markItem"
        :position="'left'"
        @update="handelUpdateMarks"
        @back="data.isShowMark = false"
      ></form-View>
    </dialog-View>
  </div>
</template>
<script setup>
// 资源导入
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getOrderDetail,
  updateOrderStatus,
  closeOrder,
  updateOrderPrice,
  updateOrderInfo,
  deleteOrderSku,
  delOrder
} from "@/apis/order/index";
import { publicTotal } from "../untls/summation";
import { ElMessage, ElMessageBox } from "element-plus";
import china from "@/utils/china.json";
import { initiateProcurement } from "@/store/index";
import useCodeArrStore from "@/store/modules/select";
// 组件导入
import stepView from "../components/step.vue";
import changeContract from "../components/changeContract.vue";
import dialogView from "../components/dialogView.vue";
import formView from "../components/formView.vue";
import RemarkEditor from "@/components/RemarkEditor";
import selectProduct from "@/views/oder/productOrders/components/selectProduct"; //导入材料-选择商品sku
// 变量声明
const setData = initiateProcurement();
const useRout = useRoute();
const useRoutePath = useRouter();
const chinas = ref(china);
const detailObj = ref({});
let copyObj = ref({});
const spanMethod = ({
  row, // 行
  column, // 列
  rowIndex, // 行索引
  columnIndex // 列索引
}) => {
  if (columnIndex === 0 || columnIndex === 6) {
    return setTableRowCol(row, rowIndex, ["factorName"]);
  }
};

// ====================================================================
const prodOptionInfo = ref({ isShow: false }); //材料-商品sku选择弹窗

/**
 * 打开导入材料-sku选择弹窗
 */
const openSelectProd = () => {
  prodOptionInfo.value.isShow = true;
  prodOptionInfo.value.orderObj = detailObj.value;
  prodOptionInfo.value.detailList = detailObj.value.orderDetailList;
};

const selectSubmit = () => {
  prodOptionInfo.value.isShow = false;
  getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
  console.log("商品添加成功，从新查询detail列表数据");
};
//=====================================================================

/**
 * 合并行
 * @param {*} row
 * @param {*} rowIndex
 * @param {*} keys
 */
const setTableRowCol = (row, rowIndex, keys) => {
  let firstIndex = 0,
    rowspan = 1,
    colspan = 1;
  // 找到需要合并的行的下标
  firstIndex = detailObj.value.orderDetailList.findIndex(item => {
    return filterSameKeys(item, row, keys);
  });
  if (rowIndex === firstIndex) {
    // 需要合并的行数
    rowspan = detailObj.value.orderDetailList.filter(item => {
      return filterSameKeys(item, row, keys);
    }).length;
    colspan = 1;
  } else {
    // 被合并的行需要设置成0
    rowspan = 0;
    colspan = 0;
  }
  return {
    rowspan,
    colspan
  };
};
// 点击库存锁定
const handelClickStockLocking = item => {
  useRoutePath.push({
    path: "/oder/stock-locking",
    query: {
      orderId: useRout.query.orderId,
      factorId: item.factorId
    }
  });
};
const handelInputValue = item => {
  console.log(item);
  item.detailNum = Number(item.commodityNum) * Number(item.partNum);
};
// 删除修改价格中的商品
const handelClickDeletsp = item => {
  // console.log(v);
  if (item.isLock == 1) {
    ElMessage({
      type: "warning",
      message: "不能删除"
    });
    return;
  }
  deleteOrderSku({ orderDetailId: item.orderDetailId }).then(() => {
    detailObj.value.orderDetailList.map(it => {
      if (it.orderDetailId === item.orderDetailId) {
        detailObj.value.orderDetailList.splice(it, 1);
      }
    });
    ElMessage({
      type: "success",
      message: "删除成功"
    });
  });
};
// 根据keys数组所有字段去做合并
const filterSameKeys = (item, row, keys) => {
  const _item = JSON.parse(JSON.stringify(item));
  let flag = true;
  keys.forEach(key => {
    flag = flag && _item[key.split("-")[0]] === row[key.split("-")[0]];
  });
  return flag;
};
const data = reactive({
  editItem: {}, //点击编辑地址得到的数据
  markItem: {}, //点击修改备注获取的数据
  orderId: "",
  stepActive: "1",
  total: 0,
  changeContractVisbel: false,
  status: 0,
  stepList: [
    { title: "合同订单确认", description: "" },
    { title: "到最终合同", description: "" },
    { title: "付款", description: "" },
    { title: "发起采购订单", description: "" }
  ],
  //   关闭交易------
  isShowOrderClose: false,
  formListOrderClose: [
    {
      label: "请选择关闭原因",
      model: "closeReason",
      type: "select",
      placeholder: "请选择关闭原因",
      data: [
        { label: "联系不上商家", value: 1 },
        { label: "买家不喜欢不想要", value: 2 },
        { label: "缺货无法交易", value: 3 }
      ]
    }
  ],
  rulesOrderClose: {
    closeReason: [{ required: true, message: "请选择关闭原因", trigger: "blur" }]
  },
  // 关闭交易------end
  // 修改价格------
  otherPrice: 0,
  salePrice: 0,
  isShowOrderPic: false,
  // 修改价格-----end

  // 修改地址------
  isShowOrderAdress: false,
  // 修改地址------------
  formListOrderAdess: [
    { label: "收货人", model: "receivingName", type: "input", max: 10 },
    { label: "手机", model: "receivingMobile", type: "input", max: 11 },
    { label: "收货地址", model: "receivingAreaIds", type: "cascader", options: chinas, max: 100 },
    { label: "详细地址", model: "receivingAreaDetail", type: "input", max: 100 }
  ],
  rulesOrderAdess: {
    receivingName: [
      { required: true, message: "请输入名称", trigger: "blur" },
      { min: 1, max: 200, message: "请输入名称", trigger: "blur" }
    ],
    receivingMobile: [
      { required: true, message: "请输入电话", trigger: "blur" },
      { min: 1, max: 200, message: "请输入电话", trigger: "blur" }
    ],
    receivingAddress: [
      {
        required: true,
        message: "请选择地址",
        trigger: "change",
        validator: (rule, value, callback) => {
          if (value.length === 0) {
            return callback(new Error("请选择一个地址"));
          }
          return callback();
        }
      }
    ],
    receivingAreaDetail: [
      { required: true, message: "请输入详细地址", trigger: "blur" },
      { min: 1, max: 300, message: "请输入详细地址", trigger: "blur" }
    ]
  },
  // 修改地址-----end
  // 修改备注-----
  isShowMark: false,
  rules: {
    marksContent: [
      { required: true, message: "请输入备注内容", trigger: "blur" },
      { min: 1, max: 200, message: "请输入备注内容", trigger: "blur" }
    ]
  },
  formList: [{ label: "备注类容", model: "remark", type: "textarea", max: 200 }]
  // 修改备注-----end
});
// 删除订单
const handelClickdelOrder = () => {
  const { orderId } = detailObj.value;
  ElMessageBox.confirm("确定删除该订单?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    delOrder({ orderId }).then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "订单删除成功",
          type: "success"
        });
        useRoutePath.push({
          path: "/oder",
          query: {
            orderTabs: useRout.query.orderTabs
          }
        });
      }
    });
  });
};
// 获取详情信息
// 是否显示立即采购按钮
const isShowCgBtn = list => {
  const res = list.some(it => it.isLock == 0);
  return res;
};
const getOrderDetails = (id, orderNo) => {
  getOrderDetail(id, orderNo)
    .then(res => {
      console.log(res);
      detailObj.value = res.data;
      let obj = JSON.stringify(res.data);
      copyObj.value = JSON.parse(obj);
      // 反显优惠价格/其他费用
      data.salePrice = res.data.salePrice;
      data.otherPrice = res.data.otherPrice;
      // 求和
      const resalt = publicTotal(res.data.orderDetailList);
      data.total = resalt;
      console.log(resalt, "resalt");
    })
    .catch(err => {
      console.log(err);
    });
};
// 返回首页
const handelClickBack = () => {
  useRoutePath.push({
    path: "/oder",
    query: {
      orderTabs: useRout.query.orderTabs
    }
  });
};
/*修改状态**/
const handelChangeFirstContract = n => {
  data.changeContractVisbel = true;
  // 首次合同状态为2,最终为3，完成为4，意向为1
  if (n === 2) {
    data.status = 2;
  } else if (n === 3) {
    data.status = 3;
  }
};
// 确定修改最终合同
const handelOk = n => {
  data.changeContractVisbel = false;
  const { orderId } = detailObj.value;
  const obj = {
    orderStatus: n,
    orderId
  };
  updateOrderStatus(obj)
    .then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "订单修改成功",
          type: "success"
        });
      }
      getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
    })
    .catch(err => {
      console.log(err);
    });
};
// 关闭交易------------
const handelClickClose = () => {
  data.isShowOrderClose = true;
};
const handelUpdateClose = item => {
  const { orderId } = detailObj.value;
  closeOrder({
    isClose: 1,
    orderId,
    closeReason: item.closeReason === 1 ? "联系不上商家" : item.closeReason === 2 ? "买家不喜欢不想要" : "缺货无法交易"
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "关闭订单成功"
      });
      getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
      data.isShowOrderClose = false;
    }
  });
};
// 关闭交易-----------end
// 修改价格-----------
// 修改订单价格--------------------------------------------------
const handelClickChangePic = () => {
  data.isShowOrderPic = true;
};

// 修改数量
const handelChangeCommodityNum = (v, item) => {
  if (item.commodityNum < 1) {
    item.commodityNum = 1;
    return;
  }
  item.actualPrice = Number(item.commodityNum) * (Number(item.unitPrice) + Number(v));
  item.detailNum = Number(item.commodityNum) * Number(item.partNum);

  handelClickPicSave(false); //刷新修改价格弹窗详情list
};

// 修改价格单价
const uniPic = ref(0);
const handelInputChangepic = item => {
  copyObj.value?.orderDetailList.map(cit => {
    if (cit.collectId == item.collectId) {
      uniPic.value = cit.unitPrice;
    }
  });
  // item.unitPrice = Number(uniPic.value) + Number(item.salePrice);
};
const picValue = ref(0); // 原来的初始价格
const handelInputSalePrice = (v, item) => {
  copyObj.value?.orderDetailList.map(it => {
    if (it.businessSkuId === item.businessSkuId) {
      picValue.value = it.actualPrice;
    }
  });
  item.actualPrice = (Number(item.unitPrice) + Number(v)) * Number(item.commodityNum);

  handelClickPicSave(false); //刷新修改价格弹窗详情list
};

// 判断是否为涨价/降价
const isReduction = n => {
  if (n < 0) {
    return "降价";
  } else {
    return "涨价";
  }
};
// 保存修改
const handelClickPicSave = (isClose = true) => {
  const obj = JSON.stringify(detailObj.value);
  const newObj = JSON.parse(obj);
  newObj.otherPrice = data.otherPrice;
  newObj.salePrice = data.salePrice;
  updateOrderPrice(newObj)
    .then(res => {
      if (res.code === 200) {
        if (isClose) {
          ElMessage({
            type: "success",
            message: "保存成功"
          });
          data.isShowOrderPic = false;
        }

        getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 修改价格------------end
// 修改订单地址开始-----------------------------------------------
const handelClickChangeAdess = () => {
  data.isShowOrderAdress = true;
  data.editItem = {
    receivingName: detailObj.value.receivingName,
    receivingMobile: detailObj.value.receivingMobile,
    receivingAreaIds: detailObj.value.receivingAreaIds.split(","),
    receivingAreaDetail: detailObj.value.receivingAreaDetail + detailObj.value.receivingAddress
  };
};
const handelUpdateAdess = item => {
  const { orderId } = detailObj.value;
  updateOrderInfo({
    orderId,
    receivingName: item.receivingName,
    receivingMobile: item.receivingMobile,
    receivingAreaIds: item.receivingAreaIds.join(),
    receivingAddress: item.receivingAreaDetail
  })
    .then(res => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改地址成功"
      });
      data.isShowOrderAdress = false;
      getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
    })
    .catch(err => {
      console.log(err);
    });
};

// 修改订单地址结束-----------------------------------------------
// 修改备注-------------
const handelClickMarks = () => {
  data.isShowMark = true;
  data.markItem = {
    remark: detailObj.value.remark
  };
};

// 确定更新备注
const handelUpdateMarks2 = () => {
  const { orderId } = detailObj.value;
  updateOrderInfo({
    orderId,
    // remark: obj.remark
    remark: detailObj.value.remark
  })
    .then(res => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改备注成功"
      });
    })
    .catch(err => {
      console.log(err);
    });
};
// 确定更新备注
const handelUpdateMarks = obj => {
  const { orderId } = detailObj.value;
  updateOrderInfo({
    orderId,
    remark: obj.remark
  })
    .then(res => {
      console.log(res);
      ElMessage({
        type: "success",
        message: "修改备注成功"
      });
      data.isShowMark = false;
      getOrderDetails(useRout.query.orderId, useRout.query.orderNo);
    })
    .catch(err => {
      console.log(err);
    });
};
// 修改备注------------end
// 跳转到普通采购单页面
const handelClickgoToCgOder = item => {
  // detailObj.value
  // console.log(item,detailObj.value);
  // return
  let newObj = JSON.stringify(item);
  let newObjCopy = JSON.parse(newObj);

  console.log("222222222222222222222", item);

  let arr = []; //得到一份没有被采购过的数据
  // 客户信息
  newObjCopy.customerName = detailObj.value.customerName;
  newObjCopy.customerId = detailObj.value.customerId;
  newObjCopy.customerMobileCode = detailObj.value.customerMobileCode;
  newObjCopy.remark = detailObj.value.remark;
  newObjCopy.customerAddress = detailObj.value.customerAddress;
  // 收货信息
  newObjCopy.receivingName = detailObj.value.receivingName;
  newObjCopy.receivingMobile = detailObj.value.receivingMobile;
  newObjCopy.receivingAddress = detailObj.value.receivingAddress;
  newObjCopy.receivingAreaIds = detailObj.value.receivingAreaIds;
  newObjCopy.receivingAreaDetail = detailObj.value.receivingAreaDetail;
  // newObjCopy.receivingName = "";
  // newObjCopy.receivingMobile = "";
  // newObjCopy.receivingAddress = "";
  // newObjCopy.receivingAreaIds = detailObj.value.receivingAreaIds;
  // newObjCopy.receivingAreaDetail = "";
  // 期望到货日期
  newObjCopy.expectedDeliveryTime = "";
  // 收获类型
  newObjCopy.receivingType = "1";
  // 其他费用
  newObjCopy.otherFee = 0;
  // 优惠金额
  newObjCopy.discountAmount = 0;
  // 附件（上传的文件）
  newObjCopy.attachmentFileUrls = "";
  // 收获仓库id
  newObjCopy.receivingWarehouseId = "";
  newObjCopy.list.map(it => {
    // if (it.isLock !== 1) {
    // if (it.buyNum > 0) {
    if (it.isLock === 0) {
      it.discountRate = 100; //折扣率
      it.discountAmount = 0; //则扣多少元
      it.unitPrice = it.supplyUnitPrice;
      it.actualAmount = (Number(it.buyNum) * Number(it.supplyUnitPrice)).toFixed(2); //实付价
      arr.push(it);
    }
  });
  // 保存默认原来的收货数据
  newObjCopy.receivingObj = {
    receivingName: detailObj.value.receivingName,
    receivingMobile: detailObj.value.receivingMobile,
    receivingAddress: detailObj.value.receivingAddress,
    receivingAreaIds: detailObj.value.receivingAreaIds,
    receivingAreaDetail: detailObj.value.receivingAreaDetail
  };
  newObjCopy.list = arr;
  console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqq", newObjCopy);
  // return
  window.sessionStorage.setItem("purchaseObj", JSON.stringify(newObjCopy));
  setData.obj = newObjCopy;
  // 跳转到普通采购单页面
  // return;
  useRoutePath.push({
    path: "/purchase-immediately",
    query: {
      orderId: useRout.query.orderId
    }
  });
};
// 定时采购
const handelClickRegularTimeProcure = item => {
  let newObj = JSON.stringify(item);
  let newObjCopy = JSON.parse(newObj);
  let arr = []; //得到一份没有被采购过的数据
  // 客户信息
  newObjCopy.customerName = detailObj.value.customerName;
  newObjCopy.customerId = detailObj.value.customerId;
  newObjCopy.customerMobileCode = detailObj.value.customerMobileCode;
  newObjCopy.remark = detailObj.value.remark;
  newObjCopy.customerAddress = detailObj.value.customerAddress;
  // 收货信息
  newObjCopy.receivingName = detailObj.value.receivingName;
  newObjCopy.receivingMobile = detailObj.value.receivingMobile;
  newObjCopy.receivingAddress = detailObj.value.receivingAddress;
  newObjCopy.receivingAreaIds = detailObj.value.receivingAreaIds;
  newObjCopy.receivingAreaDetail = detailObj.value.receivingAreaDetail;
  // 期望到货日期
  newObjCopy.expectedDeliveryTime = "";
  // 收获类型
  newObjCopy.receivingType = "1";
  // 其他费用
  newObjCopy.otherFee = 0;
  // 优惠金额
  newObjCopy.discountAmount = 0;
  // 附件（上传的文件）
  newObjCopy.attachmentFileUrls = "";
  // 收获仓库id
  newObjCopy.receivingWarehouseId = "";
  // 定时采购时间
  newObjCopy.autoPurchaseTime = "";
  newObjCopy.list.map(it => {
    // if (it.isLock !== 1) {
    if (it.isLock === 0) {
      it.discountRate = 100; //折扣率
      it.discountAmount = 0; //则扣多少元
      it.unitPrice = it.supplyUnitPrice;
      it.actualAmount = (Number(it.buyNum) * Number(it.supplyUnitPrice)).toFixed(2); //实付价
      arr.push(it);
    }
  });
  newObjCopy.list = arr;
  console.log(newObjCopy, "得到最后的数据......定时");
  setData.timerProcure = newObjCopy;
  window.sessionStorage.setItem("purchaseTime", JSON.stringify(newObjCopy));
  // 跳转到普通采购单页面
  // return;
  useRoutePath.push({
    path: "/regular-time-procure",
    query: {
      orderId: useRout.query.orderId
    }
  });
};
// 对已经采购的定时采购进行编辑
const handelClickEditTimeProcure = (item, index, timer) => {
  console.log(item, index);
  // return
  let newObj = JSON.stringify(item);
  let newObjCopy = JSON.parse(newObj);
  let arr = []; //得到一份没有被采购过的数据
  newObjCopy.timingPurchaseOrders.map(it => {
    // if (i == index) {
    arr.push(it);
    // }
  });
  // list
  let list = [];
  newObjCopy.list.map((it, i) => {
    if (i == index) {
      it.discountRate = 100; //折扣率
      it.discountAmount = 0; //则扣多少元
      it.unitPrice = it.supplyUnitPrice;
      it.actualAmount = (Number(it.buyNum) * Number(it.supplyUnitPrice)).toFixed(2); //实付价
      list.push(it);
    }
  });
  let result = arr[0];
  console.log(arr, "00000");
  // return
  // 客户信息
  newObjCopy.customerName = result?.customerName;
  newObjCopy.customerId = result?.customerId;
  newObjCopy.customerMobileCode = result?.customerMobileCode;
  newObjCopy.remark = result?.remark;
  newObjCopy.customerAddress = result?.customerAddress;
  // 收货信息
  newObjCopy.receivingName = result?.receivingName;
  newObjCopy.receivingMobile = result?.receivingMobile;
  newObjCopy.receivingAddress = result?.receivingAddress;
  newObjCopy.receivingAreaIds = result?.receivingAreaIds;
  newObjCopy.receivingAreaDetail = result?.receivingAreaDetail;
  // 期望到货日期
  newObjCopy.expectedDeliveryTime = result?.expectedDeliveryTime;
  // 收获类型
  newObjCopy.receivingType = result?.receivingType.toString();
  // 其他费用
  newObjCopy.otherFee = result?.otherFee;
  // 优惠金额
  newObjCopy.discountAmount = result?.discountAmount;
  // 附件（上传的文件）
  newObjCopy.attachmentFileUrls = result?.attachmentFileUrls;
  // 收获仓库id
  newObjCopy.receivingWarehouseId = result?.receivingWarehouseId;
  // 定时采购时间
  // newObjCopy.autoPurchaseTime = result?.autoPurchaseTime;
  newObjCopy.autoPurchaseTime = timer.autoPurchaseTime;

  console.log(arr, "---------");
  // return
  newObjCopy.timingPurchaseOrders = arr;
  newObjCopy.list = list;
  console.log(newObjCopy, "得到最后的数据......定时");
  // return
  setData.editTimer = newObjCopy;
  window.sessionStorage.setItem("purchaseEditTime", JSON.stringify(newObjCopy));
  // 跳转到普通采购单页面
  // return
  useRoutePath.push({
    path: "/edit-time-procure",
    query: {
      orderId: useRout.query.orderId
    }
  });
};
// 修改备注富文本样式
const setStyle = () => {
  setTimeout(() => {
    const remarks = document.getElementsByClassName("remarks");
    for (let i = 0; i < remarks.length; i++) {
      const img = remarks[i].querySelector("img");
      const video = remarks[i].querySelector("video");
      if (img) {
        img.style.width = 130 + "px";
      }
      if (video) {
        video.style.width = 130 + "px";
      }
    }
  }, 1000);
};
// 发起普通采购单end
onMounted(() => {
  setStyle();
  // 获取到那个太的id
  data.orderId = useRout.query.orderId;
  getOrderDetails(useRout.query.orderId, useRout.query.orderNo);

  chinas.value.map(item => {
    // 第一层
    item.label = item.name;
    item.value = item.cityCode;
    if (item.hasOwnProperty("children")) {
      console.log("第二层");
      // 第二层
      item.children.map(citem => {
        citem.label = citem.name;
        citem.value = citem.cityCode;
        if (citem.hasOwnProperty("children")) {
          // 第三层
          citem.children.map(ccitem => {
            ccitem.label = ccitem.name;
            ccitem.value = ccitem.cityCode;
          });
        }
      });
    }
  });
});
</script>
<style lang="scss" scoped>
@import "../purchaseOrder/index.scss";
// tabel列表css
.tabel_content {
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-top: none;
  .lists {
    display: flex;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    .left {
      // flex: 1;
      width: 15%;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      border-top: 1px solid #ccc;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    div:nth-child(1) {
      border-top: none;
    }
    .right {
      // flex: 6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 85%;

      .right_content {
        display: flex;
        height: 100%;
        div {
          border-right: 1px solid #ccc;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          padding: 10px;
        }
        .operate {
          border: none !important;
          button {
            line-height: 2;
          }
          div {
            border: none !important;
            display: flex;
            flex-direction: column;
          }
        }
        div:last-child {
          border: none;
        }
        div:nth-child(1) {
          //  border-bottom: none;
        }
      }
      .sp_meassge {
        width: 49.4%;
        display: flex;
        // align-items: center !important;
        div {
          padding: 10px;
        }
        div:nth-child(1) {
          border: none;
        }
        div:nth-child(2) {
          align-items: flex-start !important;
          P:nth-child(1) {
            font-size: 14px;
            color: #3d3d3d;
          }
          p {
            font-size: 12px;
            color: #86909c;
            margin: 0 0 10px 0;
          }
        }
        img {
          width: 100px;
        }
      }
      .right_content {
        div:last-child {
          display: flex;
          flex-direction: column;
        }
        div {
          display: flex;
          // justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .tabel_header {
    display: flex;
    line-height: 3;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    div {
      text-align: center;
    }
    div:nth-child(1) {
      width: 15%;
    }
    div:nth-child(2) {
      width: 35%;
    }
    div:nth-child(3) {
      width: 7%;
    }
    div:nth-child(4) {
      width: 7%;
    }
    div:nth-child(5) {
      width: 7%;
    }
    div:nth-child(6) {
      width: 7%;
    }
    div:nth-child(7) {
      width: 7%;
    }
    div:nth-child(8) {
      width: 10%;
    }
  }
}

.active {
  background-color: #fff0d9;
  display: inline-block;
  padding: 6px 10px;
  color: #ff9900;
}
.active1 {
  background-color: #d9edff;
  display: inline-block;
  padding: 4px;
  color: #007dff;
}
.active2 {
  background-color: #14c85c;
  display: inline-block;
  padding: 4px;
  color: #14c85c;
}
.operate {
  display: flex;
  flex-direction: column;
  justify-content: start;
  button {
    margin: 10px 0 10px 0 !important;
  }
}
:deep(.el-step__head) {
  text-align: left !important;
  .el-step__line {
    left: 0 !important;
    right: 0 !important;
  }
}
:deep(.el-step__main) {
  text-align: left !important;
  .el-step__description {
    padding: 0 !important;
  }
}
.lock_num {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #f2f3f5;
  height: 20px;
  border-radius: 4px;
  margin-top: 20px;
  justify-content: center !important;
  align-items: center !important;
}
.lock_num-total {
  p {
    display: flex;
    line-height: 2;
  }
  padding: 0 !important;
  width: 100%;
  background-color: #e1e6ed;
  padding: 10px !important;
}
.detail {
  background-color: #fff;
  border-radius: 10px;
  &-top {
    &-header {
      display: flex;
      justify-content: space-between;
      height: 58px;
      border-bottom: 1px solid #d8d8d8;
      box-sizing: border-box;
      div:nth-child(1) {
        // flex: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        p {
          margin: 0 32px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #3d3d3d;
          span {
            margin: 0 10px;
          }
        }
        p:nth-child(1) {
          margin-left: 20px !important;
        }
      }
      div:nth-child(2) {
        // flex: 1;
        // span {
        //   color: #007dff;
        //   margin: 0 10px;
        //   cursor: pointer;
        // }
        span:nth-child(2) {
          display: inline-block;
          width: 4px;
          height: 18px;
          background-color: #e1e6ed;
          border-radius: 2px;
          cursor: none;
        }
        div {
          span {
            color: #007dff;
            // margin: 0 20px;
            cursor: pointer;
          }
          // span:nth-child(2) {
          //   display: inline-block;
          //   width: 4px;
          //   height: 18px;
          //   background-color: #e1e6ed;
          //   border-radius: 2px;
          //   cursor: none;
          // }
          // span:nth-child(2) {
          //   display: inline-block;
          //   width: 4px;
          //   height: 18px;
          //   background-color: #e1e6ed;
          //   border-radius: 2px;
          //   cursor: none;
          // }
          span:nth-child(4) {
            display: inline-block;
            width: 4px;
            height: 18px;
            background-color: #e1e6ed;
            border-radius: 2px;
            margin: 0 20px;
            // cursor: none;
          }
          span:nth-child(6) {
            display: inline-block;
            width: 4px;
            height: 18px;
            background-color: #e1e6ed;
            border-radius: 2px;
            cursor: none;
            margin: 0 20px;
          }
        }
        .back {
          color: #007dff;
          margin: 0 20px 0 0;
          cursor: pointer;
        }
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
    &-content {
      padding: 20px;
      overflow: hidden;
      .top {
        h2 {
          font-size: 24px;
          color: #3d3d3d;
          font-weight: 400;
        }
        p {
          font-size: 14px;
          color: #4e5969;
          margin: 16px 0 16px 0;
        }
        .close_status {
          h2 {
            font-size: 18px;
            color: #3d3d3d;
          }
          p {
            color: #ff3333;
            font-size: 18px;
          }
          p:nth-child(1) {
            font-size: 14px !important;
          }
        }
      }
      .content {
        background: #f6f8fa;
        padding: 20px;
        overflow: hidden;
        margin-top: 20px;
        .content-child {
          margin-bottom: 24px;
          header {
            color: #86909c;
            font-size: 16px;
          }
          div {
            display: flex;
            margin-top: 10px;
            p {
              font-size: 14px;
              //   margin: 0 140px 0 0;
              width: 300px;
            }
          }
        }
      }
    }
  }
  &-bottom {
    padding: 20px;
    .top {
      .title {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        p {
          font-size: 18px;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #007dff;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
      }
    }
    .botton {
      padding: 30px 20px 30px 0;
      display: flex;
      div:nth-child(1) {
        width: 80%;
        flex: 2;
      }
      div:nth-child(2) {
        width: 20%;
        flex: 1;
        min-width: 200px;
        max-width: 200px;
        p {
          font-size: 14px;
          line-height: 2;
          color: #86909c;
        }
        p:last-child {
          font-size: 18px;
          color: #3d3d3d;
          font-weight: 400;
          span {
            color: red;
          }
        }
      }
    }
  }
}

.supplier {
  margin: 40px 0 40px 40px;
  div {
    margin-bottom: 20px;
    p {
      font-size: 14px;
      color: #4e5969;
      margin-bottom: 6px;
    }
  }
}
.total_price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 30px 0;
  &-left {
    flex: 2;
    display: flex;
    div {
      display: flex;
      align-items: center;
      margin-right: 10px;
      span {
        font-size: 14px;
        color: #4e5969;
        margin: 0 6px 0 0;
      }
    }
  }
  &-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    span {
      color: red;
      font-weight: bold;
    }
  }
}
/*表头*/
.table-head {
  background: #f2f6fc;
  align-items: center;
  height: 40px;
  // margin-bottom: 10px;

  .el-col:nth-child(1) {
    display: flex;
    align-items: center;

    .all {
      width: 40px;
      // @include flex-center;
    }

    .image-title {
      display: inline-block;
      width: 98px;
    }
  }

  .sort {
    display: flex;
    align-items: center;

    ::v-deep(.el-icon) {
      color: #c0c4cc;
      margin-left: 8px;
    }
  }
}
.table-list {
  .el-checkbox-group {
    line-height: unset;
    font-size: unset;
  }
  .el-col {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e1e6ed;
    border-left: 1px solid #e1e6ed;
    justify-content: center;
  }
  .el-col:nth-child(1) {
    justify-content: start;
  }
  .el-col:last-child {
    border-right: 1px solid #e1e6ed;
  }

  .goods {
    // margin-bottom: 12px;

    .business-name {
      display: flex;
      background: #f2f6fc;
      // color: #007DFF;
      height: 40px;
      font-size: 14px;
      line-height: 40px;
      flex-direction: row;
      .left {
        flex: 3;
        display: flex;
        justify-content: space-between;
        .all {
          width: 40px;
          //   @include flex-center;

          ::v-deep(.el-checkbox__label) {
            padding: 0;
          }
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        p {
          span {
            color: #007dff;
          }
        }
      }
    }

    .remark {
      font-size: 14px;
      border: 1px solid #ebeef5;
      border-top: none;
      padding: 12px;
      .label {
        color: #86909c;
        white-space: nowrap;
        margin-top: 4px;
      }
    }
  }

  .table-operate {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin: 0 18px 0 40px;
  }

  .info {
    color: #86909c;
    font-size: 12px;
    line-height: 20px;

    .red {
      color: red;
    }
  }

  .el-input {
    margin: 0 10px;
  }
}
.sp_message {
  display: flex;
  div:nth-child(1) {
    width: 200px;
    height: 200px;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.gh_message {
  line-height: 2;
  margin-bottom: 20px;
}
</style>
